<script setup>
import {render} from './index.js'
import {onMounted} from "vue";

let dataObj = ''
onMounted(() => {
  dataObj = render()
})
const changeColor = (color) => {
  const obj = dataObj.group.getObjectByName('box');
  obj.material.color.set(color);
}

const downloadImg = () => {
  const link = document.createElement('a');
  const canvas = dataObj.renderer.domElement;
  link.href = canvas.toDataURL("image/png");
  link.download = "threejs.png";
  link.click();
  link.remove();
}
</script>

<template>
  <div id="render-canvas"></div>
  <div id="scene-control">
    <div @click="changeColor(0x000099)">蓝色</div>
    <div @click="changeColor(0x880000)">红色</div>
    <div @click="downloadImg">下载</div>
  </div>
</template>

<style scoped>
#scene-control {
  position: fixed;
  inset-block-start: 100px;
  inset-inline-start: 50%;
  transform: translateX(-50%);
  display: none;
}

#scene-control div {
  cursor: pointer;
  inline-size: 80px;
  block-size: 80px;
  text-align: center;
  line-height: 80px;
  border-radius: 100px;
  background-color: #1f1f1f;
  opacity: .9;
  margin-inline-start: 50px;
}
</style>